
<template>
  <div class="blind-box-detail">
    <barrage :notificationList="notificationList"></barrage>
    <div class="top">
      <img
        :src="boxInfo.poster"
        alt=""
      >
      <div class="base-info">
        <span>{{boxInfo.name}}</br>盲盒</span>
        <div class="prize-info">
          <span>抽盒价</span>
          <span>￥</span>
          <span>{{boxInfo.price/100}}</span>
        </div>
      </div>
    </div>
    <div class="detail-box">
      <div class="title-box">
        <div></div>
        <span>奖品详情</span>
        <div></div>
      </div>
      <div class="commodity-detail-box">
        <commodity-detail-item
          v-for="(item,index) in boxInfo.prizes"
          :key="index"
          :prizeInfo="item"
          class="commodity-detail-item-box"
        ></commodity-detail-item>
      </div>
      <div class="rule-box">
        <span class="title">规则说明</span>
        <span
          :class="isDown?'slide-down content':'slide-up content'"
          v-html="content"
        ></span>
        <div @click="showOrHideRuleInfo">
          <span>{{isDown?'收起':'点击查看全部'}}</span>
          <van-icon :name="isDown?'arrow-up':'arrow-down'" />
        </div>
      </div>
    </div>

    <div class="btn-box">
      <van-button
        round
        type="info"
        @click="onDrawPrizeBtnClick"
      >￥{{boxInfo.price/100}}立即抽取</van-button>
    </div>
  </div>
</template>

<script>
import store from "@/store";
import { mapGetters } from "vuex";
import { Button } from "vant";
import apBox from "@/common/api/apBox";
import utilTool from "@/common/utils/utils";
import Share from "./mixin/share";

import CommodityDetailItem from "@/components/CommodityDetailItem";
import Barrage from "@/components/Barrage";
import OpenBlindBox from "@/components/OpenBlindBox";
import AccepBlindBox from "@/components/AccepBlindBox";
import DialogCustom from "@/components/DialogCustom";

const wx = require("weixin-js-sdk");
const appId = process.env.VUE_APP_APPID;

export default {
  name: "BlindBoxDetail",
  components: {
    [Button.name]: Button,
    [CommodityDetailItem.name]: CommodityDetailItem,
    [Barrage.name]: Barrage,
  },
  mixins: [Share],
  data() {
    return {
      boxUserRelation: "",
      emptyImg:
        "http://alivod.sdxgxx.cn/image/default/805FA0987DC9499D957BB7FF046D958C-6-2.png",
      content: "",
      boxInfo: {},
      notificationList: [],
      isDown: false,
    };
  },
  computed: {
    ...mapGetters(["userInfo"]),
  },
  created() {
    if (this.$route.query.boxId) {
      this.boxId = this.$route.query.boxId || "";
    }
    this.timer && clearInterval(this.timer);
    this.setShare();
    this.getContent();
    this.getBlindBoxDetailInfo();
  },
  mounted() {},
  methods: {
    //  展示或收起规则
    showOrHideRuleInfo() {
      this.isDown = !this.isDown;
    },
    //  抽奖
    onDrawPrizeBtnClick() {
      let boxInfo = {
        id: this.boxInfo.id,
        name: this.boxInfo.name,
        poster:this.boxInfo.poster,
        price: this.boxInfo.price
      };
      this.$router.push({
        path: "/payInfo",
        query: {
          boxInfo: JSON.stringify(boxInfo),
        },
      });
    },
    //  获取盲盒详情
    getBlindBoxDetailInfo() {
      this.$toast.loading();
      apBox
        .getBlindBoxDetail({ boxId: this.boxId, userId: this.userInfo.userId })
        .then((data) => {
          this.$toast.clear();
          this.boxInfo = data.data.boxInfo;
          this.notificationList = data.data.notificationList;
        });
    },
    //  获取规则信息
    getContent() {
      this.$toast.loading();
      apBox.getBoxRuleContent().then((data) => {
        this.$toast.clear();
        this.title = data.data.title;
        this.content = data.data.content;
      });
    },
  },
};
</script>

<style lang="less" scoped>
@import "../common/css/common.less";
.blind-box-detail {
  width: 100%;
  padding-bottom: calc(140px + env(safe-area-inset-bottom));
  padding-bottom: calc(140px + constant(safe-area-inset-bottom));
  box-sizing: border-box;
  background: linear-gradient(
    226deg,
    #98dae5 0%,
    #fcd1e5 22%,
    #fee0df 73%,
    #edeaaf 100%
  );
}
.top {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-end;
  width: 100%;
  height: auto;
  padding: 16px 24px;
  box-sizing: border-box;
  img {
    width: 236px;
    height: auto;
    margin-right: 40px;
  }
  .base-info {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    > span {
      font-size: 34px;
      font-weight: 500;
      color: #222222;
      line-height: 48px;
    }
    .prize-info {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: flex-end;
      margin-top: 24px;
      margin-bottom: 18px;
      span {
        font-size: 24px;
        color: #333333;
      }
      span:nth-child(3) {
        font-size: 48px;
        color: #222222;
        margin-bottom: -10px;
        font-weight: bold;
      }
    }
  }
}
.detail-box {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: calc(100% - 48px);
  padding: 0 22px 50px 22px;
  margin: 0 24px;
  box-sizing: border-box;
  background: #ffffff;
  border-radius: 40px 40px 16px 16px;
  margin-top: 76px;
  .title-box {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 100%;
    span {
      font-size: 28px;
      font-weight: 500;
      color: #000000;
      margin: 28px 10px;
    }
    div {
      width: 20px;
      height: 20px;
      background: linear-gradient(180deg, #ddaeff 0%, #5d78ff 100%);
      border-radius: 50%;
    }
  }
}
.commodity-detail-box {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  .commodity-detail-item-box {
    margin-bottom: 32px;
  }
}
.rule-box {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  .title {
    display: inline-block;
    text-align: left;
    font-size: 28px;
    color: #000000;
    line-height: 40px;
    margin-bottom: 26px;
  }
  .content {
    width: 100%;
    height: 360px;
    font-size: 26px;
    color: #888888;
    line-height: 40px;
    overflow: hidden;
    transition: height 1s ease-in-out;
  }
  .content.slide-down {
    height: auto;
  }
  .content.slide-up {
    height: 360px;
  }
  div {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-top: 32px;
    span,
    .van-icon {
      font-size: 24px;
      color: #3b6bd8;
      line-height: 34px;
    }
    span {
      margin-right: 5px;
    }
  }
}
.btn-box {
  width: calc(100% - 48px);
  height: calc(100px + env(safe-area-inset-bottom));
  height: calc(100px + constant(safe-area-inset-bottom));
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0 auto;
}
.van-button {
  width: 100%;
}
</style>
